<!--
 * @Author: Ylong
 * @Date: 2025-07-16 16:12:40
 * @LastEditTime: 2025-07-21 20:49:41
-->
<template>
  <div class="approval">
    <div class="filter"></div>
    <div class="result">
      <el-table
        v-loading="loading"
        :data="result.rows"
        stripe
        style="width: 100%"
        :empty-text="loading ? '加载中...' : '暂无待审核数据'"
      >
        <el-table-column
          v-for="header in tableHeaders"
          :key="header.prop"
          :prop="header.prop"
          :label="header.label"
          :min-width="header.width"
        >
          <template #default="scope">
            <span v-if="header.prop === 'status'">
              <el-tag :type="fmtStatus(scope.row[header.prop]).type">{{
                fmtStatus(scope.row[header.prop]).label
              }}</el-tag>
            </span>
            <span v-else>
              {{ scope.row[header.prop] }}
            </span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="100">
          <template #default="scope">
            <el-button
              v-if="scope.row.status == 2"
              link
              type="primary"
              size="small"
              @click="handleApproval(scope.row)"
            >
              审批
            </el-button>
            <span v-else style="color: #ccc">/</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="result.page.pageNo"
          v-model:page-size="result.page.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="result.total"
          @size-change="getPageData"
          @current-change="getPageData"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ApproveUser, GetApproveList } from "../../../services/base.api";
import { ElMessage, ElMessageBox } from "element-plus";

const loading = ref(true);

const tableHeaders = [
  { prop: "datetime", label: "申请日期", width: "200" },
  { prop: "account", label: "账户", width: "120" },
  { prop: "username", label: "用户名", width: "120" },
  { prop: "status", label: "状态", width: "120" },
];

const fmtStatus = (s: number) => {
  return {
    label: ["", "已通过", "待审批"][s] || "已拒绝",
    type: ["", "success", "primary"][s] || "danger",
  };
};

const result = reactive({
  page: {
    pageNo: 1,
    pageSize: 10,
  },
  rows: [] as any[],
  total: 0,
});

const getPageData = () => {
  loading.value = true;
  GetApproveList({ ...result.page })
    .then((res) => {
      const { total, users } = res.data;
      result.rows = users;
      result.total = total;
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false;
      }, 300);
    });
};

const handleApproval = (row: any) => {
  ElMessageBox.confirm(`用户【${row.username}】是否通过审核吗？`, `提示`, {
    confirmButtonText: "通过",
    cancelButtonText: "拒绝",
    type: "warning",
  })
    .then(() => {
      ApproveUser({
        userId: row.userId,
        approve: "1",
      }).then(() => {
        ElMessage.success("审核成功，通过审核");
        getPageData();
      });
    })
    .catch(() => {
      ApproveUser({
        userId: row.userId,
        approve: "2",
      }).then(() => {
        ElMessage.success("审核成功，拒绝审核");
        getPageData();
      });
    });
};

onMounted(() => {
  getPageData();
});
</script>

<style scoped lang="scss">
.approval {
  width: 100%;
  height: 100%;

  .result {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
